<!-- 微社区 瀑布流组件 点击进入帖子详情页 -->
<template>
  <div id="Waterfalls_flow" :style="{ backgroundColor: datas ? datas.preview_color || '#f2f2f2' : '#f2f2f2' }" style="text-align: left;">
    <van-empty v-if="fun.isTextEmpty(list)" image="search" :description="showLoading?'抱歉，暂无数据':'加载中...'" />
    <template v-if="!fun.isTextEmpty(list)">
      <ul ref="newArray1" :class="`zq-waterfall-left${id}`" v-if="newArray1.length > 0">
        <li v-for="item in newArray1" :class="{'no-click':nowClick}" @click="jumpDetails(item.id)" :key="item.id">
          <div class="top" :class="{ 'text-bg': !item.has_many_image[0] }">
            <img v-if="item.has_many_image[0]" :src="item.has_many_image[0].url" alt="" />
            <div class="mic-content" v-if="!item.has_many_image[0]"><p v-html="item.contents"></p></div>
          </div>
          <div class="bottom">
            <div class="title">{{ item.title }}</div>
            <div class="content">
              <div class="headmessage" v-if="item.has_one_stick_user">
                <div class="left">
                  <img :src="item.has_one_stick_user.avatar" alt="" />
                </div>
                <div class="name">{{ item.has_one_stick_user.nickname }}</div>
              </div>
              <div class="thumbup">
                <div class="right">
                  <img src="../assets/images/micro_communities/detail_praise@2x.png" alt="" />
                </div>
                <div class="num">{{ item.praise_num }}</div>
              </div>
            </div>
          </div>
          <div v-if="nowClick" class="shenhe">
            <i class="iconfont icon-shenhe"></i>
            <span style="margin-top: 0.4688rem;">待审核</span>
          </div>
        </li>
      </ul>
      <ul ref="newArray2" :class="`zq-waterfall-right${id}`" v-if="newArray2.length > 0">
        <li v-for="item in newArray2" :class="{'no-click':nowClick}"  @click="jumpDetails(item.id)" :key="item.id">
          <div class="top" :class="{ 'text-bg': !item.has_many_image[0] }">
            <img v-if="item.has_many_image[0]" :src="item.has_many_image[0].url" alt="" />
            <div class="mic-content" v-if="!item.has_many_image[0]"><p v-html="item.contents"></p></div>
          </div>
          <div class="bottom">
            <div class="title">{{ item.title }}</div>
            <div class="content">
              <div class="headmessage" v-if="item.has_one_stick_user">
                <div class="left">
                  <img :src="item.has_one_stick_user.avatar" alt="" />
                </div>
                <div class="name">{{ item.has_one_stick_user.nickname }}</div>
              </div>
              <div class="thumbup">
                <div class="right">
                  <img src="../assets/images/micro_communities/detail_praise@2x.png" alt="" />
                </div>
                <div class="num">{{ item.praise_num }}</div>
              </div>
            </div>
          </div>
          <div v-if="nowClick" class="shenhe">
            <i class="iconfont icon-shenhe"></i>
            <span style="margin-top: 0.4688rem;">待审核</span>
          </div>
        </li>
      </ul>

      <div class="load" v-if="!showLoading || imgLoading">
        <div class="loader">
         <div class="horizontal">
          <div class="circlesup">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
          </div>
        </div>
     </div>
      </div>

      <div v-if="isDiy">
        <div style="width: 100%; height: 40px; line-height: 40px; text-align: center;" v-if="isLoadMore && showLoading && !imgLoading" @click="getMoreData">{{ $i18n.t("加载更多") }}</div>
        <!-- <div style="width: 100%; height: 40px; line-height: 40px; text-align: center;" v-if="!isLoadMore && showLoading && !imgLoading">{{ $i18n.t("没有更多了") }}~</div> -->
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: ["list", "showLoading", "datas", "isDiy", "isLoadMore", "id", "nowClick", "isclick"],
  data() {
    return {
      newArray1: [],
      newArray2: [],
      propList: [],
      imgLoading: false, //图片是否加载完成
      isclicknow: false
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.imgLoading = false;
    this.newArray1 = [];
    this.newArray2 = [];
    this.propList = this.list;
    this.sort(0, this.propList);
  },
  activated() {
    this.imgLoading = false;
    this.newArray1 = [];
    this.newArray2 = [];
    this.propList = this.list;
    this.sort(0, this.propList);
  },
  methods: {
    getMoreData() {
      this.$emit("getMore", true);
    },
    sort(arg, list) {
      if (this.isclick === true) {
        this.newArray1 = [];
        this.newArray2 = [];
        this.$emit("isclickfun", false);
      }

      let that = this;
      let index = arg || 0;
      if (list && list.length > 0 && list.length > index) {
        this.imgLoading = true;
        if (list[index].has_many_image && list[index].has_many_image[0]) {
          that.getImg(
            list[index].has_many_image[0].url,
            function() {
              that.setArrays(list, index);
            },
            function() {
              that.imgLoading = false;
              list[index].has_many_image[0].url = "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/img_404.png";
              that.$nextTick(() => {
                that.sort(index, list);
              });
            }
          );
        } else {
          that.setArrays(list, index);
        }
      }
      if (list.length - 1 == index) {
        this.$emit("loadMore", true);
      }
    },
    setArrays(list, index) {
      let boxA = 0;
      let boxB = 0;
      if (document.getElementsByClassName(`zq-waterfall-left${this.id}`)[0]) {
        boxA = document.getElementsByClassName(`zq-waterfall-left${this.id}`)[0].clientHeight;
      }
      if (document.getElementsByClassName(`zq-waterfall-right${this.id}`)[0]) {
        boxB = document.getElementsByClassName(`zq-waterfall-right${this.id}`)[0].clientHeight;
      }
      if (boxA <= boxB) {
        this.newArray1.push(list[index]);
      } else {
        this.newArray2.push(list[index]);
      }
      this.$nextTick(() => {
        this.sort(index + 1, list);
      });
      this.imgLoading = false;
    },
    // 图片加载完回调
    getImg(url, callback, callback2) {
      let img = new Image();
      img.src = url;
      // console.log("完全加载完毕的事件================", img);
      //如果图片被缓存，则直接返回缓存数据
      if (img.complete) {
        /* callback(img.width, img.height); */
        callback(img.width, img.height, Number(img.height) / Number(img.width));
      } else {
        //完全加载完毕的事件
        img.onload = function() {
          /* callback(img.width, img.height); */
          callback(img.width, img.height, Number(img.height) / Number(img.width));
        };
        img.onerror = function() {
          console.log("图片链接error:: 404", img);
          callback2();
        };
      }
    },
    jumpDetails(stick_id) {
      if (this.nowClick === true) {
        return;
      }
      this.$router.push(
        this.fun.getUrl("microCommentDetails", {
          stickId: stick_id
        })
      );
    }
  },

  watch: {
    list: function(newVal, oldVal) {
      let oldLength = oldVal ? oldVal.length : 1;
      this.sort(oldLength, newVal);
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#Waterfalls_flow {
  background: #fff;
  .shenhe{
    position: absolute;
    left: 50%;
    top:50%;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    transform: translate(-50%,-50%);
  }
  .no-click{
    position: relative;
    &::after{
      content:"";
      position: absolute;
      top: 0;
      left: 0;
      right:  0;
      bottom: 0;
      opacity: 0.45;
      z-index: 10;
      background: #000;
    }
  }

  /* min-height: 90vh; */
  .load {
    .loader {
    // position: fixed;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    text-align: center;

    /* disable selection and cursor changes */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    z-index: 9999;
  }
  .text {
    // position: fixed;
    // left: -2.1rem;
    // top: -1.7rem;
    -webkit-animation: text 2s infinite;
    -moz-animation: text 2s infinite;
    -ms-animation: text 2s infinite;
    -o-animation: text 2s infinite;
    animation: text 2s infinite;
  }

  /* Set for the second layer horizontal position */
  .horizontal {
    // position: fixed;
    // top: -2.5rem;
    // left: -2rem;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* The next two classes do mirror for animation */
  .circlesup {
    // position: fixed;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
  }

  /* Create a container for our circles, rotate it 45 degrees and set animation */
  .circle {
    // position: fixed;
    // width: 3rem;
    // height: 3rem;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: orbit 2s infinite;
    -moz-animation: orbit 2s infinite;
    -ms-animation: orbit 2s infinite;
    -o-animation: orbit 2s infinite;
    animation: orbit 2s infinite;
    z-index: 5;
  }

  /* Style's of our circles */
  .circle::after {
    content: "";
    position: fixed;
    width: 15px;
    height: 15px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    background: var(--themeLoadingColor); /* Pick a color 1 */
  }

  .circle:nth-child(2) {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
    -ms-animation-delay: 100ms;
    -o-animation-delay: 100ms;
    animation-delay: 100ms;
    z-index: 4;
  }

  .circle:nth-child(2)::after {
    background: var(--themeLoadingColor); /* Pick a color 2 */
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    opacity: 0.7;
  }

  .circle:nth-child(3) {
    -webkit-animation-delay: 225ms;
    -moz-animation-delay: 225ms;
    -ms-animation-delay: 225ms;
    -o-animation-delay: 225ms;
    animation-delay: 225ms;
    z-index: 3;
  }

  .circle:nth-child(3)::after {
    background: var(--themeLoadingColor); /* Pick a color 3 */
    -webkit-transform: scale(0.6, 0.6);
    -moz-transform: scale(0.6, 0.6);
    -ms-transform: scale(0.6, 0.6);
    -o-transform: scale(0.6, 0.6);
    transform: scale(0.6, 0.6);
    opacity: 0.6;
  }

  .circle:nth-child(4) {
    -webkit-animation-delay: 350ms;
    -moz-animation-delay: 350ms;
    -ms-animation-delay: 350ms;
    -o-animation-delay: 350ms;
    animation-delay: 350ms;
    z-index: 2;
  }

  .circle:nth-child(4)::after {
    background: var(--themeLoadingColor); /* Pick a color 4 */
    -webkit-transform: scale(0.4, 0.4);
    -moz-transform: scale(0.4, 0.4);
    -ms-transform: scale(0.4, 0.4);
    -o-transform: scale(0.4, 0.4);
    transform: scale(0.4, 0.4);
    opacity: 0.5;
  }

  .circle:nth-child(5) {
    -webkit-animation-delay: 475ms;
    -moz-animation-delay: 475ms;
    -ms-animation-delay: 475ms;
    -o-animation-delay: 475ms;
    animation-delay: 475ms;
    z-index: 1;
  }

  .circle:nth-child(5)::after {
    background: var(--themeLoadingColor); /* Pick a color 5 */
    -webkit-transform: scale(0.2, 0.2);
    -moz-transform: scale(0.2, 0.2);
    -ms-transform: scale(0.2, 0.2);
    -o-transform: scale(0.2, 0.2);
    transform: scale(0.2, 0.2);
    opacity: 0.4;
  }

  /* Animation keys */
  @-webkit-keyframes orbit {
    0% {
      -webkit-transform: rotate(45deg);
    }

    5% {
      -webkit-transform: rotate(45deg);
      -webkit-animation-timing-function: ease-out;
    }

    70% {
      -webkit-transform: rotate(405deg);
      -webkit-animation-timing-function: ease-in;
    }

    100% {
      -webkit-transform: rotate(405deg);
    }
  }

  @keyframes orbit {
    0% {
      transform: rotate(45deg);
    }

    5% {
      transform: rotate(45deg);
      animation-timing-function: ease-out;
    }

    70% {
      transform: rotate(405deg);
      animation-timing-function: ease-in;
    }

    100% {
      transform: rotate(405deg);
    }
  }

  @-webkit-keyframes text {
    0% {
      -webkit-transform: scale(0.2, 0.2);
      -webkit-animation-timing-function: ease-out;
    }

    40%,
    60% {
      -webkit-transform: scale(1, 1);
      -webkit-animation-timing-function: ease-out;
    }

    70%,
    100% {
      -webkit-transform: scale(0.2, 0.2);
    }
  }

  @-moz-keyframes text {
    0% {
      -moz-transform: scale(0.2, 0.2);
      -moz-animation-timing-function: ease-out;
    }

    50% {
      -moz-transform: scale(1, 1);
      -moz-animation-timing-function: ease-out;
    }

    60% {
      -moz-transform: scale(1, 1);
      -moz-animation-timing-function: ease-out;
    }

    100% {
      -moz-transform: scale(0.2, 0.2);
    }
  }

  @keyframes text {
    0% {
      transform: scale(0.2, 0.2);
      animation-timing-function: ease-out;
    }

    50% {
      transform: scale(1, 1);
      animation-timing-function: ease-out;
    }

    60% {
      transform: scale(1, 1);
      animation-timing-function: ease-out;
    }

    100% {
      transform: scale(0.2, 0.2);
    }
  }

  }

  ul {
    vertical-align: top;
    display: inline-block;
    width: 46%;
    margin: 0.625rem 0 0.625rem 2.5%;

    li {
      border-radius: 0.38rem;
      width: 100%;
      background-color: #fff;
      padding-bottom: 0.69rem;
      margin-bottom: 0.75rem;
      overflow: hidden;

      .top {
        // display: flex;
        margin: 0;
        padding: 0;

        img {
          width: 100%;
          overflow: hidden;
          margin: 0;
          display: block;
        }

        .mic-content {
          font-size: 12px;
          line-height: 18px;
          color: #666;
          padding: 0.25rem;
          border-radius: 0.25rem;
          // width: 100%;
          // margin: 0.375rem;
          min-height: 48px;
          background: #fff;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 5;
        }
      }

      .text-bg {
        padding: 0.375rem;
        background-color: red; /* 浏览器不支持时显示 */
        // background-image: linear-gradient(#e66465 60%, #ffffff 40%);
        background: linear-gradient(#e66465 5%, #fff 90%);
      }

      .bottom {
        padding: 0 0.375rem;

        .title {
          font-weight: 600;
          padding-top: 0.63rem;
          font-size: 0.84rem;
          line-height: 1rem;
          display: -webkit-box;
          text-overflow: ellipsis;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-align: left;
          margin-bottom: 0.59rem;
        }

        .content {
          display: flex;
          justify-content: space-between;

          .headmessage {
            display: flex;

            .left {
              width: 1.13rem;
              height: 1.13rem;
              border-radius: 50%;

              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }

            .name {
              width: 4rem;
              margin-left: 0.31rem;
              height: 1.13rem;
              line-height: 1.13rem;
              text-align: left;
              color: #8c8c8c;
              font-size: 0.69rem;
              overflow: hidden; /* 超出部分隐藏 */
              text-overflow: ellipsis; /* 超出部分显示省略号 */
              white-space: nowrap; /* 规定段落中的文本不进行换行 */
            }
          }

          .thumbup {
            display: flex;
            align-items: center;
            padding-top: 0.16rem;

            .right {
              width: 0.81rem;
              height: 0.84rem;
              margin-right: 0.38rem;

              img {
                width: 100%;
                height: 100%;
                display: block;
              }
            }

            .num {
              min-width: 2rem;
              max-width: 8rem;
              text-align: left;
              color: #333;
              font-size: 0.75rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>
